<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col :span="22">
            <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
              <el-form-item label="学科名称">
                <el-input v-model.trim="ruleForm.subjectName" placeholder="请输入学科名称" />
              </el-form-item>
              <el-form-item>
                <el-button @click="clearForm">清除</el-button>
                <el-button type="primary" @click="handleClick">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light">
              <el-button type="success" icon="el-icon-edit" @click="openDialog({})">新增学科</el-button>
            </div>
          </el-col>
        </el-row>
        <el-alert type="info" show-icon :closable="false">
          数据一共{{total}}条
        </el-alert>
        <!-- 表格 -->
        <Table ref="tableRef" :page="page" :pageSize="pageSize" @getData="getData" @openDialog="openDialog" @pageChange="pageChange" />
        <Pagination v-show="pages>1" :page="page" :pages="pages" :pageSize="pageSize" :pageSizes="pageSizes" @changeSize="changeSize" @changePage="changePage" />
      </el-card>
      <AddSubject ref="AddSubject" :dialogVisible.sync="dialogVisible" @update="update" />
    </div>
  </div>
</template>

<script>
import Table from './../components/subjects-table.vue'
import Pagination from './../components/pagination.vue'
import AddSubject from './../components/subjects-add.vue'
export default {
  name: 'Articles',
  components: { Table, Pagination, AddSubject },
  data() {
    return {
      ruleForm: {
        subjectName: ''
      },
      total: 10,
      page: 1,
      pages: 1,
      pageSize: 10,
      pageSizes: [5, 10, 20, 50],
      dialogVisible: false // 添加修改弹窗
    }
  },
  methods: {
    // 分页符更改数据
    changeSize(size) {
      this.pageSize = size
      this.page = 1
      // 发请求
      this.$refs.tableRef.getlist({ page: this.page, pagesize: this.pageSize })
    },
    changePage(page) {
      this.page = page
      // 发请求
      this.$refs.tableRef.getlist({ page: this.page, pagesize: this.pageSize })
    },
    // 分页符数据
    getData(data) {
      this.total = +data.counts
      this.page = +data.page
      this.pages = +data.pages
      this.pageSize = +data.pagesize
    },
    // 清除
    clearForm() {
      if (!this.ruleForm.subjectName) {
        this.page = 1
        this.$refs.tableRef.getlist({ page: this.page, pagesize: this.pageSize })
      } else {
        this.ruleForm.subjectName = ''
      }
    },
    // 查询 学科
    handleClick() {
      if (!this.ruleForm.subjectName) return
      this.page = 1
      this.$refs.tableRef.getlist({
        page: this.page,
        pagesize: this.pageSize,
        subjectName: this.ruleForm.subjectName
      })
    },
    // 打开添加 修改弹窗
    openDialog(data) {
      this.dialogVisible = true
      // console.log(data)
      if (!data.id) return
      this.$refs.AddSubject.ruleForm.id = data.id
      this.$refs.AddSubject.ruleForm.isFrontDisplay = data.isFrontDisplay + ''
      this.$refs.AddSubject.ruleForm.subjectName = data.subjectName
    },
    // 更新数据
    update() {
      this.$refs.tableRef.getlist({
        page: this.page,
        pagesize: this.pageSize
      })
    },
    // 删除数据  本业没数据了 返回上一页
    pageChange() {
      if (this.pages >= 1) {
        this.page--
        this.$refs.tableRef.getlist({ page: this.page, pagesize: this.pageSize })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-alert {
  height: 30px;
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: right;
  margin-top: 15px;
}
</style>
